<script setup>
import { reactive, computed } from 'vue';

// 工资状态枚举
const salaryStatus = {
  0: '未发放',
  1: '已发放',
  2: '已撤回'
};

// 模拟数据
// 修正后的模拟数据
const salaryData = reactive([
  {
    id: 1,
    employeeName: '糖醋',
    employeeId: 'EMP2023001',
    month: '2025-01',
    department: '生产部',
    baseSalary: 15000,
    bonus: 3000,
    socialSecurity: 2280,
    status: 1,
    get actualSalary() {
      return this.baseSalary + this.bonus - this.socialSecurity;
    }
  },
  {
    id: 2,
    employeeName: '糖醋',
    employeeId: 'EMP2023001',
    month: '2025-02',
    department: '生产部',
    baseSalary: 15000,
    bonus: 3000,
    socialSecurity: 2280,
    status: 1,
    get actualSalary() {
      return this.baseSalary + this.bonus - this.socialSecurity;
    }
  },
  {
    id: 3,
    employeeName: '糖醋',
    employeeId: 'EMP2023001',
    month: '2025-03',
    department: '生产部',
    baseSalary: 15000,
    bonus: 3000,
    socialSecurity: 2280,
    status: 1,
    get actualSalary() {
      return this.baseSalary + this.bonus - this.socialSecurity;
    }
  }
]);

// 筛选条件
const filterState = reactive({
  selectedMonth: '',
  selectedDepartment: ''
});


// 计算实发工资
const calculateActualSalary = (item) => {
  return item.baseSalary + item.bonus - item.socialSecurity;
};

// 过滤后的工资数据
const filteredSalaries = computed(() => {
  try {
    return salaryData.filter(item => {
      // 添加空值保护
      const month = item.month || '';
      const dep = item.department || '';
      
      const matchMonth = filterState.selectedMonth 
        ? month === filterState.selectedMonth 
        : true;
        
      const matchDepartment = filterState.selectedDepartment
        ? dep === filterState.selectedDepartment
        : true;

      return matchMonth && matchDepartment;
    });
  } catch (e) {
    console.error('数据过滤出错:', e);
    return [];
  }
});

// 状态样式
const statusClass = (status) => {
  return {
    0: 'status-pending',
    1: 'status-done',
    2: 'status-canceled'
  }[status];
};

// 月份选择
const changeMonth = (e) => {
  filterState.selectedMonth = e.detail.value;
};


// 删除确认
const confirmDelete = (id) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条工资记录吗？',
    success: (res) => {
      if (res.confirm) {
        const index = salaryData.findIndex(item => item.id === id);
        salaryData.splice(index, 1);
      }
    }
  });
};

// 导航方法
const viewDetail = (id) => {
  uni.navigateTo({ url: `/pages/salary/detail?id=${id}` });
};

const editRecord = (id) => {
  uni.navigateTo({ url: `/pages/salary/edit?id=${id}` });
};

const navigateToAdd = () => {
  uni.navigateTo({ url: '/pages/salary/add' });
};
</script>


<template>
  <view class="container">
    <!-- 操作与筛选栏 -->
    <view class="operation-bar">
      <view class="filters">
        <picker mode="date" fields="month" @change="changeMonth">
          <view class="filter-item">选择月份：{{ selectedMonth || '全部' }}</view>
        </picker>
      <!--  <picker @change="changeDepartment" :range="departments">
          <view class="filter-item">选择部门：{{ selectedDepartment || '全部' }}</view>
        </picker> -->
      </view>
    </view>
<!-- 表格区域 -->

	<!-- 工资数据表格 -->
	<uni-table class="salary-table" border stripe emptyText="暂无工资数据">
	  <uni-tr>
	    <uni-th width="120" align="center">员工姓名</uni-th>
	    <uni-th width="100" align="center">工号</uni-th>
	    <uni-th width="100" align="center">发放月份</uni-th>
	    <uni-th width="120" align="center">基本工资</uni-th>
	    <uni-th width="120" align="center">绩效奖金</uni-th>
	    <uni-th width="120" align="center">社保扣除</uni-th>
	    <uni-th width="120" align="center">实发工资</uni-th>
	    <uni-th width="150" align="center">发放状态</uni-th>
	    <uni-th width="160" align="center">操作</uni-th>
	  </uni-tr>
	 <uni-tr v-for="item in filteredSalaries" :key="item.id">
	    <uni-td align="center">{{ item.employeeName }}</uni-td>
	    <uni-td align="center">{{ item.employeeId }}</uni-td>
	    <uni-td align="center">{{ item.month }}</uni-td>
	    <uni-td align="center">{{ item.baseSalary.toFixed(2) }}</uni-td>
	    <uni-td align="center">{{ item.bonus.toFixed(2) }}</uni-td>
	    <uni-td align="center">{{ item.socialSecurity.toFixed(2) }}</uni-td>
	    <uni-td align="center" :class="{ 'warning-text': item.actualSalary < 0 }">
	      {{ item.actualSalary.toFixed(2) }}
	    </uni-td>
	    <uni-td align="center">
	      <view :class="['status-tag', statusClass(item.status)]">
	        {{ salaryStatus[item.status] }}
	      </view>
	    </uni-td>
	    <uni-td align="start">
	      <button class="action-btn" @click="viewDetail(item.id)">详情</button>
	      <button class="action-btn edit-btn" @click="editRecord(item.id)">编辑</button>
	      <button class="action-btn delete-btn" @click="confirmDelete(item.id)">删除</button>
	    </uni-td>
	  </uni-tr>
	</uni-table>
  </view>
</template>



<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8f9fa;
}

.operation-bar {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 15rpx;

  .filters {
    display: flex;
    gap: 20rpx;
    flex-wrap: wrap;

    .filter-item {
      padding: 10rpx 20rpx;
      background-color: #e9ecef;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
  }
}

.add-button {
  background-color: #007bff;
  color: white;
  padding: 2rpx 30rpx;
  align-self: flex-start;
}
.salary-table {
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;

  ::v-deep .uni-table-th {
    background-color: #f1f3f5;
    font-weight: 600;
  }

  .warning-text {
    color: #dc3545;
    font-weight: bold;
  }

  .status-tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 24rpx;

    &.status-pending {
      background-color: #fff3cd;
      color: #856404;
    }

    &.status-done {
      background-color: #d4edda;
      color: #155724;
    }

    &.status-canceled {
      background-color: #f8d7da;
      color: #721c24;
    }
  }
}

.action-btn {
  display: inline-block;
  margin: 5rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  border-radius: 6rpx;

  &.edit-btn {
    background-color: #ffc107;
    color: #000;
  }

  &.delete-btn {
    background-color: #dc3545;
    color: white;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>